<template>
  <view class="yt-dateTimePicker" v-if="md.done">
    <view
      class="mask"
      :class="{ show: md.open }"
      :style="{ backgroundColor: props.maskBgColor }"
      @touchmove.stop.prevent
      catchtouchmove="true"
    >
    </view>

    <view class="wrap" :class="{ show: md.open }">
      <view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
        <view class="cancel" @click="md.open = false">×</view>
        <text>{{ props.title }}</text>
        <view class="submit" @click="_onSubmit()">确定</view>
      </view>

      <view class="calendar" v-if="props.isShowCalendar">
        <view
          :class="md.calendar == 'gongli' ? 'active' : ''"
          @click="md.calendar = 'gongli'"
          >公历</view
        >
        <view
          :class="md.calendar == 'nongli' ? 'active' : ''"
          @click="md.calendar = 'nongli'"
          >农历</view
        >
      </view>

      <view class="picker-body">
        <picker-view
          :value="md.value"
          @change="_onChange"
          indicator-class="select-line"
        >
          <picker-view-column v-if="props.timeHide[0]">
            <view
              v-for="(item, index) in md.years"
              :key="item"
              :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ item + props.timeLabel[0] }}
            </view>
          </picker-view-column>
          <picker-view-column v-if="props.timeHide[1]">
            <view
              v-for="(item, index) in md.months"
              :key="item"
              :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + props.timeLabel[1] }}
            </view>
          </picker-view-column>
          <picker-view-column v-if="props.timeHide[2]">
            <view
              v-for="(item, index) in md.days"
              :key="item"
              :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + props.timeLabel[2] }}
            </view>
          </picker-view-column>

          <picker-view-column v-if="props.timeHide[3]">
            <view
              v-for="(item, index) in md.hours"
              :key="item"
              :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + props.timeLabel[3] }}
            </view>
          </picker-view-column>

          <picker-view-column v-if="props.timeHide[4]">
            <view
              v-for="(item, index) in md.minutes"
              :key="item"
              :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + props.timeLabel[4] }}
            </view>
          </picker-view-column>

          <picker-view-column v-if="props.timeHide[5]">
            <view
              v-for="(item, index) in md.seconds"
              :key="item"
              :class="
                md.value[0] == index ? 'select-item column-item' : 'column-item'
              "
            >
              {{ zeroPadding(item) + props.timeLabel[5] }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { onReady } from "@dcloudio/uni-app";

const props = defineProps({
  title: {
    type: String,
    default: "出生时间",
  },
  startYear: {
    type: Number,
    default: 1949,
  },
  endYear: {
    type: Number,
    default: 2049,
  },
  timeLabel: {
    type: Array,
    default: () => ["年", "月", "日", "时", "分", "秒"],
  },
  timeHide: {
    type: Array,
    default: () => [true, true, true, true, true, true],
  },
  timeInit: {
    type: Number,
    default: Date.now(),
  },
  isShowCalendar: {
    type: Boolean,
    default: true,
  },
  maskBgColor: {
    type: String,
    default: "rgba(49, 47, 47, 0.4)",
  },
});
const emit = defineEmits(["submit"]);
defineExpose({
  show,
  hide,
});

const md = reactive({
  open: false,

  years: [],
  months: [],
  days: [],
  hours: [],
  minutes: [],
  seconds: [],

  year: "",
  month: "",
  day: "",
  hour: "",
  minute: "",
  second: "",
  value: [0, 0, 0, 0, 0, 0],
  done: false,
  calendar: "gongli",
});

watch(md.month, (newValue, oldValue) => {
  initDays();
});

const currentDatetime = new Date(props.timeInit);

onMounted(() => {
  init();
});

function init() {
  initYears();
  initMonths();
  initDays();
  initHours();
  initMinutes();
  initSeconds();
  setSelectValue();
  md.done = true;
}

function initYears() {
  const years = [];
  for (let year = props.startYear; year <= props.endYear; year++) {
    years.push(year);
    if (currentDatetime.getFullYear() === year) {
      md.value[0] = year - props.startYear;
    }
  }
  md.years = years;
}

function initMonths() {
  const months = [];
  for (let month = 1; month <= 12; month++) {
    months.push(month);
    if (currentDatetime.getMonth() + 1 === month) {
      md.value[1] = month - 1;
    }
  }
  md.months = months;
}

function initDays() {
  const value = md.value;
  const selectedYear = md.years[value[0]];
  const selectedMonth = md.months[value[1]];
  const days = [];
  const totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
  for (let day = 1; day <= totalDays; day++) {
    days.push(day);
    if (currentDatetime.getDate() === day) {
      md.value[2] = day - 1;
    }
  }
  md.days = days;
}

function initHours() {
  const hours = [];
  for (let hour = 0; hour <= 23; hour++) {
    hours.push(hour);
    if (currentDatetime.getHours() === hour) {
      md.value[3] = hour;
    }
  }
  md.hours = hours;
}

function initMinutes() {
  const minutes = [];
  for (let minute = 0; minute < 60; minute++) {
    minutes.push(minute);
    if (currentDatetime.getMinutes() === minute) {
      md.value[4] = minute;
    }
  }
  md.minutes = minutes;
}

function initSeconds() {
  const seconds = [];
  for (let second = 0; second < 60; second++) {
    seconds.push(second);
    if (currentDatetime.getSeconds() === second) {
      md.value[5] = second;
    }
  }
  md.seconds = seconds;
}

function show() {
  init();
  md.open = true;
}

function hide() {
  md.open = false;
}

function _onChange(e) {
  md.value = e.detail.value;
  setSelectValue();
}

function setSelectValue() {
  const v = md.value;

  md.year = md.years[v[0]];
  md.month = md.months[v[1]];
  md.day = md.days[v[2]];
  md.hour = md.hours[v[3]];
  md.minute = md.minutes[v[4]];
  md.second = md.seconds[v[5]];
}

function _onSubmit() {
  const result = {
    year: props.timeHide[0] ? zeroPadding(md.year) : "",
    month: props.timeHide[1] ? zeroPadding(md.month) : "",
    day: props.timeHide[2] ? zeroPadding(md.day) : "",
    hour: props.timeHide[3] ? zeroPadding(md.hour) : "",
    minute: props.timeHide[4] ? zeroPadding(md.minute) : "",
    second: props.timeHide[5] ? zeroPadding(md.second) : "",
    calendar: md.calendar,
  };

  emit("submit", result);
  hide();
}

function zeroPadding(num) {
  return num.toString().padStart(2, "0");
}
</script>

<style scoped lang="scss">
@import "./x-time-picker.scss";
</style>
